<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico"  th:href="@{/images/favicon.ico}"/>
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" media="all"  th:href="@{/plugin/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../../static/back_css/public.css" media="all"  th:href="@{/back_css/public.css}"/>
    <link rel="stylesheet" href="../../../static/back_css/index2.css" media="all"  th:href="@{/back_css/index2.css}"/>
</head>
<body>

<div class="main">
    <div class="top">
        <div class="top_nav1">
            <p>参与活动人数</p>
            <div>
            <button type="button" onclick="toUser()"><img src="../../../static/images/peoplecount.png" th:src="@{/images/peoplecount.png}"></button>
            </div>
            <h1 th:text="${ParticipantsCount}+'人'">236人</h1>
        </div>
        <div class="top_nav1">
            <p>参与活动作品数</p>
            <div>
                <button type="button" onclick="toWork()"><img src="../../../static/images/works.png" th:src="@{/images/works.png}"></button>
            </div>
            <h1 th:text="${WorksCount}+'个'">86个</h1>
        </div>
        <div class="top_nav2">
            <p>目前正在进行的活动</p>
            <div class="top_nav2_content">
                <div><img src="../../../static/images/bill.png" th:src="@{${activity.ACTIVITY_IMG}}"></div>
                <div>
                    <h4 style="font-weight: bold" th:text="${#strings.abbreviate(activity.getACTIVITY_NAME(),20)}">第一届全民阅读投票活动</h4>
                    <p>活动时间</p>
                    <p th:if="${activity.STAGE_IS_OPEN}==0" th:text="'决赛：'+${activity.STARTTIME}+'--'+${activity.ENDTIME}">初赛：2019-06-06 -- 2019-07-10</p>
                    <p th:if="${activity.STAGE_1ST_NAME!=null}" th:text="${activity.STAGE_1ST_NAME}+':'+${activity.ST1_STARTTIME}+'--'+${activity.ST1_ENDTIME}">初赛：2019-06-06 -- 2019-07-10</p>
                    <p th:if="${activity.STAGE_2ND_NAME!=null}" th:text="${activity.STAGE_2ND_NAME}+':'+${activity.ST2_STARTTIME}+'--'+${activity.ST2_ENDTIME}">初赛：2019-06-06 -- 2019-07-10</p>
                    <p th:if="${activity.STAGE_3RD_NAME!=null}" th:text="${activity.STAGE_3RD_NAME}+':'+${activity.ST3_STARTTIME}+'--'+${activity.ST3_ENDTIME}">初赛：2019-06-06 -- 2019-07-10</p>
                    <p th:if="${activity.STAGE_4TH_NAME!=null}" th:text="${activity.STAGE_4TH_NAME}+':'+${activity.ST4_STARTTIME}+'--'+${activity.ST4_ENDTIME}">初赛：2019-06-06 -- 2019-07-10</p>
                    <a class="layui-btn layui-btn-sm layui-btn-radius btn-color" onclick="getDetails()" type="button">查看详情 &nbsp;&gt;</a>
                    <a class="layui-btn layui-btn-sm layui-btn-radius btn-color" onclick="accountWorkDetails()" type="button">活动统计 &nbsp;&gt;</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <p>最新作品</p>
        <ul>
            <li th:each="work:${works}">
                <div class="container_content_img"><img src="../../../static/images/siweihe.jpg" th:src="@{${work.WORK_IMGURL}}"> </div>
                <h4 th:text="${#strings.abbreviate(work.WORK_NAME,10)}">朗读《浮生六记》</h4>
                <p th:text="'作者：'+${#strings.abbreviate(work.USER_NAME,7)}">作者：明晓辉</p>
                <p th:text="'推荐地址：'+${#strings.abbreviate(work.DISTRICT_NAME,5)}">重庆市儿童图书馆</p>
                <a class="layui-btn layui-btn-sm layui-btn-radius btn-color btn" >点击查看详情</a>
                <input type="hidden" th:value="${work.WORK_ID}"/>
            </li>
        </ul>
    </div>
</div>
<div class="works_vet" th:each="work:${works}" th:id="'video_details'+${work.WORK_ID}" th:if="${work.WORK_TYPE}==0" style="display: none">
    <form class="layui-form" action="" method="get">
        <div>
            <span>视频详情</span>
            <button class="close2" type="button"><i class="layui-icon">&#x1006;</i></button>
            <input type="hidden" th:value="${work.WORK_ID}"/>
        </div>
        <div class="layui-form-item">
            <h3 th:text="${work.WORK_NAME}">罗小黑同人创作</h3>
            <ul>
                <li>
                    <i class="layui-icon layui-icon-username"></i>
                    <span th:text="${work.USER_NAME}">张晓宇</span>
                </li>
                <li>
                    <i class="layui-icon layui-icon-date"></i>
                    <span th:text="${work.TIME}">2019-06-09</span>
                </li>
                <li><img src="../../../static/images/heard.png" th:src="@{/images/heard.png}">
                    <span th:text="${work.VOTES_NUMBER}">26993</span>
                </li>
                <li>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-xs" th:onclick="'javascript:download('+${work.WORK_ID}+')'"><img src="../../../static/images/download.png" th:src="@{/images/download.png}">下载</button>
                </li>
                <div class="clear"></div>
            </ul>
            <div class="layui-form-video">
                <video width="710" height="350" src="../../../static/images/video.mp4" th:src="@{${work.RESOURCE_URL}}" controls="controls">
                </video>
            </div>
            <ul>
                <li><span>推荐单位：</span>
                    <span th:text="${work.DISTRICT_NAME}">重庆市儿童图书馆</span>
                </li>
                <br/>
                <li><span>作品描述：</span>
                    <span th:text="${work.WORK_ASSESSMENT}">重庆市儿童图书馆</span>
                </li>
                <div class="clear"></div>
            </ul>
        </div>

    </form>
</div>
<div class="works_vet" th:each="work:${works}" th:id="'video_details'+${work.WORK_ID}" th:if="${work.WORK_TYPE}==1" style="display: none">
    <form class="layui-form" action="" method="get">
        <div>
            <span>音频详情</span>
            <button class="close3" type="button"><i class="layui-icon">&#x1006;</i></button>
            <input type="hidden" th:value="${work.WORK_ID}"/>
        </div>
        <div class="layui-form-item ">
            <div>
                <div class="vet_audio_img">
                    <img src="../../../static/images/userface2.jpg" th:src="@{${work.WORK_IMGURL}}">
                </div>
                <div class="vet_audio">
                    <h5 th:text="${work.WORK_NAME}">朗读《小王子》</h5>
                    <ul>
                        <li>
                            <i class="layui-icon layui-icon-username"></i>
                            <span th:text="${work.USER_NAME}">张晓宇</span>
                        </li>
                        <li>
                            <i class="layui-icon layui-icon-date"></i>
                            <span th:text="${work.TIME}">2019-06-09</span>
                        </li>
                        <li><img src="../../../static/images/heard.png" th:src="@{/images/heard.png}">
                            <span th:text="${work.VOTES_NUMBER}">26993</span>
                        </li>
                        <div class="clear"></div>
                    </ul>
                    <div style="line-height: 35px;">

                        <audio controls="controls" src="../../../static/images/1.mp3" th:src="@{${work.RESOURCE_URL}}" style="width:100%;height:32px;" >

                        </audio>
                    </div>
                </div>
                <div class="vet_works_down">
                    <div ><button type="button" class="layui-btn layui-btn-warm layui-btn-xs down_btn"  th:onclick="'javascript:download('+${work.WORK_ID}+')'"><img src="../../../static/images/download.png" th:src="@{/images/download.png}">下载</button></div>
                </div>
            </div>
            <ul class="address_ul">
                <li><span>推荐单位：</span>
                    <span th:text="${work.DISTRICT_NAME}">重庆市儿童图书馆</span>
                </li>
                <br/>
                <li><span>作品描述：</span>
                    <span th:text="${work.WORK_ASSESSMENT}">重庆市儿童图书馆</span>
                </li>
                <div class="clear"></div>
            </ul>
        </div>

    </form>
</div>
<div class="works_vet" th:each="work:${works}" th:id="'video_details'+${work.WORK_ID}" th:if="${work.WORK_TYPE}==2" style="display: none">
    <form class="layui-form" action="" method="get">
        <div>
            <span>图片详情</span>
            <button class="close2" type="button"><i class="layui-icon">&#x1006;</i></button>
            <input type="hidden" th:value="${work.WORK_ID}"/>
        </div>
        <div class="layui-form-item">
            <h3 th:text="${work.WORK_NAME}">罗小黑同人创作</h3>
            <ul>
                <li>
                    <i class="layui-icon layui-icon-username"></i>
                    <span th:text="${work.USER_NAME}">张晓宇</span>
                </li>
                <li>
                    <i class="layui-icon layui-icon-date"></i>
                    <span th:text="${work.TIME}">2019-06-09</span>
                </li>
                <li><img src="../../../static/images/heard.png" th:src="@{/images/heard.png}">
                    <span th:text="${work.VOTES_NUMBER}">26993</span>
                </li>
                <li>
                    <div style="padding: 10px; text-align: center;width: 68px;background: #009c8e;">
                        <a th:href="@{'/SearchPic?WORK_ID='+${work.WORK_ID}}" style="color: white;width:100%;">查看图片</a>
                    </div>
                </li>
                <div class="clear"></div>
            </ul>
            <ul>
                <li><span>推荐单位：</span>
                    <span th:text="${work.DISTRICT_NAME}">重庆市儿童图书馆</span>
                </li>
                <br/>
                <li><span>作品描述：</span>
                    <span th:text="${work.WORK_ASSESSMENT}">重庆市儿童图书馆</span>
                </li>
                <div class="clear"></div>
            </ul>
        </div>

    </form>
</div>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js"  th:src="@{/plugin/layui/layui.js}"></script>
<script>
    function toUser(){
        window.location.href='/signup_info';
    }
    function toWork(){
        window.location.href='/work';
    }
    function getDetails(){
        window.location.href='/getActivityDetails';
    }
    function accountWorkDetails(){
        window.location.href='/accountWorkDetails';
    }
    function download(id) {
        window.location.href = '/download?work_ID=' + id;
    };
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery;
        $(".btn").on("click", function () {
            var id = $(this).next("input").val();
            var ID='video_details'+id;
            $("#"+ID).css("display", "block");
        });
        $(".close2").on("click", function () {
            var id = $(this).next("input").val();
            var ID='video_details'+id;
            $("#"+ID).css("display", "none");
        });
        $(".close3").on("click", function () {
            var id = $(this).next("input").val();
            var ID='video_details'+id;
            $("#"+ID).css("display", "none");
        });
    });
</script>
</body>
</html>